<template>
  <div id="panel">
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <el-form-item label="样本名称：" prop="samplename">
          <el-input
            v-model="queryParams.samplename"
            placeholder="请输入样本名称"
          ></el-input>
        </el-form-item>
        <div class="searchBtnBox">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="padding: 10px"
            >查询</el-button
          >
          <el-button @click="resetQuery" style="padding: 10px">
            <i class="iconfont icon-saoba"></i>
            清除
          </el-button>
        </div>
      </el-form>
    </el-card>
    <el-card class="pageContent">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdate"
            >修改</el-button
          >
        </el-col> -->
        <!-- <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col> -->
      </el-row>
      <el-table
        :data="tableList.rows"
        stripe
        :height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="tracename" label="设备名称" />
        <el-table-column prop="samplename" label="样本名称" />
        <el-table-column prop="detectiontime" label="检测时间" />
        <el-table-column prop="peakvalue" label="峰值" />
        <el-table-column prop="tradefingername" label="所属企业" />
        <el-table-column prop="industrytype" label="所属行业">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.industry_type"
              :value="scope.row.industrytype"
            />
          </template>
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" />
        <el-table-column prop="legalperson" label="法人" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" @click="delRows(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination-self"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        layout="slot, total, sizes, prev, pager, next, jumper"
        :total="tableList.total"
      >
        <el-button
          class="refresh-button"
          icon="el-icon-refresh"
          title="刷新"
          @click="getList"
        />
      </el-pagination>
    </el-card>
    <!-- 新增/修改弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="所属设备" prop="traceid">
          <el-select
            v-model="form.traceid"
            placeholder="请选择所属设备"
            style="width: 100%"
          >
            <el-option
              v-for="item in deviceOptions"
              :key="item.id"
              :label="item.equipmentname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属企业" prop="tradefinger">
          <el-select
            v-model="form.tradefinger"
            placeholder="请选择所属企业"
            style="width: 100%"
          >
            <el-option
              v-for="item in enterpriseOptions"
              :key="item.polluteid"
              :label="item.pollutename"
              :value="item.polluteid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样本名称" prop="samplename">
          <el-input
            v-model="form.samplename"
            placeholder="请输入样本名称"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="监测时间" prop="detectiontime">
          <el-date-picker
            v-model="form.detectiontime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="峰值" prop="peakvalue">
          <el-input
            v-model="form.peakvalue"
            placeholder="请输入峰值"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="所属行业" prop="industrytype">
          <el-select
            v-model="form.industrytype"
            placeholder="请选择所属行业"
            style="width: 100%"
          >
            <el-option
              v-for="item in dict.type.industry_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input
            v-model="form.contacts"
            placeholder="请输入联系人"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="请输入联系方式"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="法人" prop="legalperson">
          <el-input
            v-model="form.legalperson"
            placeholder="请输入法人"
            maxlength="30"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTraceabilityList,
  deleteTraceability,
  addTraceability,
  updateTraceability,
  getTraceabilityDetail,
  getDeviceSelect,
  getEnterpriseSelect,
} from "@/api/traceability";
export default {
  name: "SampleManagement",
  dicts: ["industry_type"],
  data() {
    return {
      tableHeight: window.innerHeight - 400,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        samplename: "",
      },
      tableList: {
        total: 0,
        rows: [],
      },
      ids: [],
      open: false,
      title: "",
      form: {},
      rules: {
        traceid: [
          { required: true, message: "所属设备不能为空", trigger: "blur" },
        ],
        tradefinger: [
          { required: true, message: "所属企业不能为空", trigger: "blur" },
        ],
        samplename: [
          { required: true, message: "样本名称不能为空", trigger: "blur" },
        ],
        detectiontime: [
          { required: true, message: "监测时间不能为空", trigger: "blur" },
        ],
        peakvalue: [
          { required: true, message: "峰值不能为空", trigger: "blur" },
        ],
        industrytype: [
          { required: true, message: "所属行业不能为空", trigger: "blur" },
        ],
      },
      deviceOptions: [],
      enterpriseOptions: [
        { value: "新旺化工有限公司", label: "新旺化工有限公司" },
        { value: "宿州埇桥区污水处理厂", label: "宿州埇桥区污水处理厂" },
        { value: "天龙化工有限公司", label: "天龙化工有限公司" },
      ],
      industryOptions: [
        { value: "化工", label: "化工" },
        { value: "洗涤", label: "洗涤" },
      ],
    };
  },
  created() {
    this.getDevice();
    this.getEnterprise();
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取设备的下拉接口
    getDevice() {
      getDeviceSelect().then((res) => {
        this.deviceOptions = res.data;
      });
    },
    // 获取企业的下拉接口
    getEnterprise() {
      getEnterpriseSelect().then((res) => {
        this.enterpriseOptions = res.data;
      });
    },
    // 选择框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },
    handleUpdate() {
      if (this.ids.length === 0) {
        this.$message.warning("请选择一条数据进行修改");
        return;
      }
      if (this.ids.length > 1) {
        this.$message.warning("只能选择一条数据进行修改");
        return;
      }
      this.reset();
      this.open = true;
      this.title = "修改";
      const selectedRow = this.tableData.find(
        (item) => item.id === this.ids[0]
      );
      if (selectedRow) {
        this.form = { ...selectedRow };
      }
    },
    handleDelete() {
      if (this.ids.length === 0) {
        this.$message.warning("请选择需要删除的数据");
        return;
      }
      this.$confirm("是否确认删除选中数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    edit(row) {
      this.open = true;
      this.title = "修改";
      this.form = { ...row };
    },
    delRows(row) {
      this.$confirm("是否确认删除该行数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        traceid: "",
        tradefinger: "",
        samplename: "",
        detectiontime: "",
        peakvalue: "",
        industrytype: "",
        contacts: "",
        phone: "",
        legalperson: "",
      };
      // this.$refs.form.resetFields();
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            updateTraceability(this.form).then((res) => {
              this.open = false;
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            addTraceability(this.form).then((res) => {
              this.open = false;
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },
    getList() {
      getTraceabilityList(this.queryParams).then((res) => {
        this.tableList.total = res.total;
        this.tableList.rows = res.rows;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 10px 0 10px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .el-form-item__content {
      min-width: 200px;
    }

    .searchBtnBox {
      display: inline-block;
      margin: 10px 0 10px 20px;
    }
  }

  .pageContent {
    .el-table {
      width: 100%;
    }

    .el-pagination {
      margin-top: 15px;
    }
  }
}
</style>
